<template>
  <view>



    <!-- aniType动画类型（13种）：fadeInAndScaleUp、slideFromRight、slideFromBottom、newspaper、fall、sideAndFall、flipH3d、flipV3d、sign3d、superScale、slit3d、rotateFromBottom3d、rotateFromLeft3d -->
    <kevy-mask :show="show" @click="hideMask" :contentStyle="contentStyle" :maskClose="false" :z-index="9999"
      aniType="fadeInAndScaleUp">
      <!-- 包裹在标签内的布局信息会通过slot插入到内容部分 -->
      <!-- <view class="desc">kevy-mask内部节点会以slot方式插入哦</view> -->
      <view class="tips-box">
        <view class="tips-head">
          温馨提示
        </view>
        <view class="tips-text">
          为确保签名文件的完整性及可用性请横置手机认真填写您的真实签名此签名文件将用于后续业务办理签名使用!
        </view>
        <view class="tips-bot">
          <text @click="hideMask">我已知晓</text>
        </view>
      </view>
    </kevy-mask>


    <piaoyi-signature v-if="!show"></piaoyi-signature>

  </view>
</template>

<script>
  import {
    pathToBase64,
    base64ToPath
  } from '../../../js_sdk/mmmm-image-tools/index.js'
  import {
    data
  } from '../../../uni_modules/uview-ui/libs/mixin/mixin.js';
  export default {
    data() {
      return {
        dataPath: [],
        imgurl: '',
        Workerinfo: [],
        imagePath: '',
        isShow: true,
        //显示或隐藏遮罩
        show: true,
        //内容最外层样式
        contentStyle: {
          'width': '600rpx',
          'height': '400rpx',
          'border-radius': '10rpx',
          'background': '#fff'
        }
      }
    },
    methods: {
      showMask() {
        this.show = true;
      },
      hideMask() {
        this.show = false;
      },
      hideTips() {
        this.isShow = false
      },
      // 将签名上传给服务器
      pushImage(path) {
        let token = uni.getStorageSync('token')
        uni.showLoading({
          title: '上传签名中'
        })
        uni.uploadFile({
          url: this.path + '/contract/upload',
          filePath: path,
          name: 'file',
          header: {
            Authorization: token
          },
          formData: {
            Authorization: token
          },
          timeout: 5000,
          success: (res) => {
            console.log('签名上传成功');
            console.log(res);
            uni.hideLoading()
            // 判断签名上传的返回值是否成功
            if (res.statusCode == 200) {
              //签名上传返回值成功 跳转到下一个页面
              this.dataPath.push(res.data)
              console.log('this.dataPath', this.dataPath);
              uni.redirectTo({
                url: './contractmading?id=' + JSON.parse(this.dataPath[0]).data
              })
            } else {
              //签名上传返回值失败 直接提示然后返回页面
            }
          },
          fail: (err) => {
            console.log(err);
            console.log('签名上传失败');
            uni.showToast({
              title: '签名上传失败 请稍后重试',
            })
            uni.hideLoading()
            uni.navigateBack()
          }
        })

      },
      imageTobase(path) {
        pathToBase64(path).then(base64 => {
          console.log(base64);
          return base64
        })
      },
      getworkerinfo(id) {
        uni.$get(this.path + '/contract/get/' + id).then(res => {
          if (res.code == 200) {
            this.Workerinfo.push(res.data)
            this.Workerinfo[0].contractStatus = 0

          }
        })
      },
    },
    onLoad(options) {
      uni.$once('pushImages', res => {
        this.imagePath = res.imagePath
        console.log('this.imagePath', this.imagePath);
        this.pushImage(this.imagePath)
      })
      console.log(this.Workerinfo);
    },
    created() {

    },
    mounted() {

    },
    onUnload() {}
  }
</script>

<style>
  .tips-text {
    padding-top: 20rpx;
    width: 492rpx;
    height: 171rpx;
    padding: 5rpx;
    margin: 0 24rpx;
    padding-top: 14rpx;
    border-bottom: 1px solid #e2e2e2;
    font-size: 28rpx;
  }

  .tips-head {
    font-weight: bold;
    font-size: 30rpx;

  }

  .tips-box {
    transform: rotate(90deg);
    transform-origin: center center;
    font-size: 13rpx;
    width: 540rpx;
    height: 400rpx;
    border-radius: 10rpx;
    background-color: #fff;
    z-index: 99;
    position: fixed;
    top: 504rpx;
    left: 160rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .tips-bot {
    font-size: 28rpx;
    color: #FF1919;
    margin-top: 10rpx;
    padding-top: 23rpx;
  }
</style>

<style scoped lang="scss">
  .t-btn {
    width: 80%;
    height: 80rpx;
    margin-top: 20rpx;
    text-align: center;
    border-radius: 30rpx;
    line-height: 80rpx;
    background-color: #17ba7a;
    margin-left: auto;
    margin-right: auto;
    font-size: 36rpx;
    color: #fff;
  }

  .desc {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 28rpx;
    color: #333;
  }
</style>
